import { createApp, ref, reactive, onMounted, watch, toRefs } from 'vue'

export function useListView(props, context) {

    let vNode;
    const randerTemp = () => {
        if (props.data.length > 0 && props.temp) {
            vNode && vNode.unmount();
            const newTemp = `
                <div class="list-view-header">
                    <div class="list-view-toolbar"></div>
                </div>
                <div class="list-view-body">
                    <div 
                        class="list-view-item"
                        style="
                            width: ${100 / props.column}%
                        "
                        v-for="(item, index) in newData" 
                        :key="index"
                        :ref="listRefs"
                    >
                        <div
                            class="item-wrapper"
                            style="
                                margin-left: ${ props.marginX !== null ? props.marginX : props.margin }px;
                                margin-right: ${ props.marginX !== null ? props.marginX : props.margin }px;
                                margin-top: ${ props.marginY !== null ? props.marginY : props.margin }px;
                                margin-bottom: ${ props.marginY !== null ? props.marginY : props.margin }px;
                            "
                        >
                            <div class="item-header">
                                <div class="item-toolbar">
                                    <span 
                                        class="iconfont icon-edit"
                                    ></span>
                                    <span 
                                        class="iconfont icon-delete"
                                        v-if="${props.delBtn}"
                                        @click="delBtnCustom(item, index)"
                                    ></span>
                                </div>
                            </div>
                            <div class="item-content">
                                ${props.temp}
                            </div>
                        </div>
                    </div>
                </div>
            `;
            const Profile = {
                template: newTemp,
                setup() {
                    let list = reactive([]);
                    const listRefs = (el) => {
                        if (el) {
                            list.push(el)
                        }
                    }
                    const handleClickDel = () => {
                        context.emit
                    }
                    onMounted(() => {
                        context.emit('after-content', list);
                        event && document.dispatchEvent(event);
                    })
                    return {
                        newData: props.data,
                        delBtnCustom: props.delBtnCustom,
                        listRefs
                    }
                },
            }
            vNode = createApp(Profile);
            vNode.mount('.mg-list-view');
        }
    }

    watch(
        () => [props.data, props.temp], 
        (newValue, oldValue) => {
            randerTemp();
        },
        // { deep: true }
    )

    onMounted(() => {
        randerTemp();
    });

    return {

    }
}